
#{extends 'main.html' /}


<style>
    table
    {
    	border-collapse:collapse;
    	border-width:10px;
    }
	td
	{
		width:100px;
		height:100px;
		font-size:85px;
		text-align:center;
		border-width:10px;
		cursor:pointer;
	}
	
	
	#controls
	{
		float: right;
		
		
	}
	
	#garbage
	{
		width: 60px;
	}
	
	#wrapper
	{
		width:500px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.result
	{
		float:right;
		margin-top: 150px;
		margin-left:40px;
	}
	
	.result img
	{
		width:60px;
	}
</style>



<div id="wrapper">
<audio controls="controls" type="audio/mpeg" >
</audio>
<div id="controls">
<img src="/public/images/garbage.jpg" id="garbage" onclick="init()"/><br/>
<div id="you_are_right" class="result"><img src="/public/images/happy.png" /><br/> <button onclick="init()">Next Question</button></div>
<div id="you_are_wrong" class="result"><img src="/public/images/sad.png" /> <br/><button onclick="init()">Next Question</button></div>
</div>
<br/>
<table border="1">
	<tr><td>letter1</td><td>letter2</td><td>letter3</td></tr>
	<tr><td>letter4</td><td>letter5</td><td>letter6</td></tr>
	<tr><td>letter7</td><td>letter8</td><td>letter9</td></tr>
</table>

</div>
<script type="text/javascript">
	
	// var letters = ["A","B","C","D","E",
		// "F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V", "W", "X","Y","Z"];
		
		
	var letters = ["A","B","C","D","E","F","G","H","I"];
		
	function populate_letters()
	{
		letters = ["A","B","C","D","E","F","G","H","I","J","K"];
	}
	
	function pick_a_letter()
	{
		var randomLocation = Math.floor(Math.random()*letters.length);
	    return letters[ randomLocation ];
	}
	
	function pick_an_answer()
	{
		var answer = pick_a_letter();
		$("audio").attr("src","/public/sound/letter_" + answer.toLowerCase() + ".mp3");
		$("audio").attr("answer",answer);
		$("audio").attr("autoplay","autoplay");
	}
	
	function init()
	{
		$(".result").hide();
		populate_letters();
		pick_an_answer();
		var selectedLetters = [];
		for ( var i = 0 ; i < 9; i += 1)
		{
			var randomLetter = pick_a_letter();
			while ( selectedLetters.indexOf(randomLetter) >= 0)
			{
			    randomLetter = pick_a_letter(); 
			}
			selectedLetters.push(randomLetter)
			console.log(randomLetter)
		
		} 
		console.log("populating")
		console.log(selectedLetters)
		$("td").each(
				function( index , item ){
					console.log("item = " + $(item).text() + ", index = " + index);
					var letter = selectedLetters[index];
					$(item).text(letter).attr("letter",letter);
				}
			)
	}
	
	$(function(){		
		
		init();
		$("td").click( function(){ 
			
			if ( $("#you_are_right").is(":visible") || $("#you_are_wrong").is(":visible"))
			{
				return;
			}
			
			var guess = $(this).attr("letter");
			var answer = $("audio").attr("answer");
			 
			if ( answer == guess)
			{
				$("#you_are_right").show();
			}
			else
			{
				$("#you_are_wrong").show();
				document.reload()
			}
			
			} )
		
	})
	
	
</script>